<script setup lang="ts">
defineOptions({
  name: "Welcome"
});

import { PureTable } from "@pureadmin/table";
import { useColumns } from "./util/hook";
import { ref } from "vue";
import { CirclePlus, RefreshLeft, Search } from "@element-plus/icons-vue";
const {
  columns,
  pagination,
  loading,
  dataList,
  adaptiveConfig,
  onCurrentChange,
  onSizeChange,
  loadingConfig,
  cancelEvent,
  confirmEvent,
  form,
  openLoding,
  refresh,
  search,
  reset
} = useColumns();
const circleUrl =
  "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";

const formRef = ref();
</script>
·

<template>
  <div>
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-[99/100] pl-12 pt-[20px] pb-[5px] mb-3"
    >
      <el-form-item label="用户昵称：" prop="nickname">
        <el-input
          v-model="form.nickname"
          placeholder="请输入用户昵称"
          clearable
          class="!w-[160px]"
        />
      </el-form-item>
      <el-form-item label="手机号码：" prop="phone">
        <el-input
          v-model="form.phone"
          placeholder="请输入手机号码"
          clearable
          class="!w-[160px]"
        />
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-select
          v-model="form.status"
          placeholder="请选择"
          clearable
          class="!w-[160px]"
        >
          <el-option label="已开启" value="1" />
          <el-option label="已关闭" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :loading="loading"
          :icon="Search"
          @click="search(form)"
        >
          搜索
        </el-button>
        <el-button @click="reset(formRef)"> 重置 </el-button>
      </el-form-item>
    </el-form>
    <div class="bg-white w-[99/100] mt-2 px-2 pb-2 bg-bg_color">
      <div class="flex justify-between w-full h-[60px] p-4">
        <p class="font-bold truncate">用户管理</p>
        <div class="flex items-center justify-around">
          <el-button type="primary" @click="openLoding()">
            <el-icon><CirclePlus /></el-icon>
            新增用户
          </el-button>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="刷新"
            placement="top"
          >
            <el-button :icon="RefreshLeft" circle @click="refresh()" />
          </el-tooltip>
        </div>
      </div>
      <PureTable
        table-layout="auto"
        row-key="id"
        :data="dataList"
        :header-cell-style="{
          background: 'var(--el-fill-color-light)',
          color: 'var(--el-text-color-primary)'
        }"
        adaptive
        :adaptiveConfig="adaptiveConfig"
        :columns="columns"
        :loading="loading"
        alignWhole="center"
        :loading-config="loadingConfig"
        :pagination="pagination"
        @page-size-change="onSizeChange"
        @page-current-change="onCurrentChange"
      >
        <template #avatar="{ row, index }">
          <el-image
            v-if="row.avatar == null"
            preview-teleported
            loading="lazy"
            :src="circleUrl"
            :preview-src-list="dataList.map(v => circleUrl)"
            :initial-index="index"
            fit="cover"
            class="w-[40px] h-[40px] rounded-full"
          />
          <el-image
            v-else
            preview-teleported
            loading="lazy"
            :src="row.avatar"
            :preview-src-list="dataList.map(v => v.avatar)"
            :initial-index="index"
            fit="cover"
            class="w-[40px] h-[40px] rounded-full"
          />
        </template>
        <template #operation="{ index, row }">
          <el-button
            link
            type="primary"
            size="small"
            @click="openLoding('修改', row)"
          >
            修改
          </el-button>
          <el-popconfirm
            @confirm="confirmEvent(index, row)"
            @cancel="cancelEvent"
            title="你确定要删除这条数据吗？"
          >
            <template #reference>
              <el-button link type="primary" size="small"> 删除 </el-button>
            </template>
          </el-popconfirm>
        </template>
      </PureTable>
    </div>
  </div>
</template>

<style>
html,
body {
  margin: 0;
  padding: 0;
}
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.el-button:focus-visible) {
  outline: none;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
